<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="../js/jquery-3.5.1.js"></script>

  <script type="text/javascript">
    $(function () {
      $("img").mouseenter(function () {
        $("img").addClass(".SL-move");
      });
      $("img").mouseleave(function () {
        $("img").removeClass("SL-move");
      })
    })
  </script>


  <link rel="stylesheet" type="text/css" href="center.css">
  <style>
    .Sl-move {
      z-index: 8 !important;
    }

    .bird {
      overflow: hidden;
      position: absolute;
    }

    .bird01 {
      z-index: 5;
      margin-left: 1400px;
      margin-top: 180px;
    }

    .bird02 {
      z-index: 5;
      margin-left: 200px;
      margin-top: 280px;
    }
    .bird03 {
      z-index: 5;
      margin-left: 1390px;
      margin-top: 160px;
    }
    .bird04 {
      z-index: 5;
      margin-left: 130px;
      margin-top: 380px;
    }
    .bird05 {
      z-index: 5;
      margin-left: 1550px;
      margin-top: 300px;
    }
    .bird06 {
      z-index: 5;
      margin-left: 180px;
      margin-top: 50px;
    }
    .bird07 {
      z-index: 5;
      margin-left: 1550px;
      margin-top: 300px;
    }
  </style>
</head>

<body>
  <div class="P1">

    <img src="../center/images/SLOGAN.png" class="p1-Slogo" />
    <img src="images/part-overflow.png" class="partLeft" />
    <img src="../center/images/part.png" class="partRight" />
    <a href="http://game.163.com/">
      <img src="images/EnterOfficialWebsite.png" class="Enter" />
    </a>
    <img src="../center/images/download.png" class="download">
  </div>
  <div>
    <div class="p1-BGp2">
      <!-- <img src="images/bird/bird.png"class="bird"> -->
      <div class="p2">
        <!-- <img src="images/bird/bird.png"> -->
        <img src="images/p2/p2-tiltle.png" class="p2-tiltle">
        <img src="images/p2/01.png" class="p2-01">
        <img src="images/p2/02.png" class="p2-02">
        <img src="images/p2/03.png" class="p2-03">
        <img src="images/p2/04.png" class="p2-04">
        <img src="images/p2/05.png" class="p2-05">
        <img src="images/p2/06.png" class="p2-06">
        <img src="images/p2/07.png" class="p2-07">
        <img src="images/p2/08.png" class="p2-08">
      </div>

      <div class="p3">
        <!-- <img src="images/bird/bird.png"> -->
        <img src="images/p3/p3-tiltle.png" class="p3-tiltle">
        <img src="images/p3/p3-01.jpg" class="p3-01">
        <img src="images/p3/p3-02.jpg" class="p3-02">
        <img src="images/p3/p3-03.jpg" class="p3-03">
      </div>

      <div class="p4">
        <!-- <img src="images/bird/bird.png"> -->
        <img src="images/p4/p4-tiltle.png" class="p4-tiltle">
        <img src="images/p4/p4-BG.png" class="p4-BG">
        <img src="images/p4/p4-main.png" class="p4-main">
      </div>

      <div class="bird">
        <img src="images/bird/bird01.png" class="bird01">
        <img src="images/bird/bird02.png" class="bird02">
        <img src="images/bird/bird03.png" class="bird03">
        <img src="images/bird/bird04.png" class="bird04">
        <img src="images/bird/bird05.png" class="bird05">
        <img src="images/bird/bird06.png" class="bird06">
        <img src="images/bird/bird07.png" class="bird07">
      </div>
    </div>
</body>

</html>